<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import { House, InfoFilled } from '@element-plus/icons-vue'

const activeIndex = ref('/')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const menuList = [
  { index: '/', label: '首页', icon: House },
  { index: '/about', label: '关于', icon: InfoFilled },
]
</script>

<template>
  <div class="min-h-screen flex flex-col max-w-6xl mx-auto p-4 gap-4">
    <!-- 顶部导航栏 -->
    <header class="z-10">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        :ellipsis="false"
        :router="true"
        @select="handleSelect"
      >
        <el-menu-item index="/">
          <img src="@/assets/logo.svg" alt="Vue logo" class="h-8" />
        </el-menu-item>
        <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
    </header>

    <!-- 内容区 -->
    <main class="flex-1 container mx-auto h-full w-full">
      <RouterView />
    </main>

    <!-- 页脚 -->
    <footer class="py-4">
      <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        &copy; {{ new Date().getFullYear() }} Vue 3 模板项目 - 基于 Vue 3 + TypeScript + Vite +
        Element Plus + Tailwind CSS
      </div>
    </footer>
  </div>
</template>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
